<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import {useWayBillInfoApi, useWayBillAppealApi} from "@/apis/order"
	import { waybilltype, waybillstate, waybillSettlementStatus } from "@/utils/format"
	import { reactive, ref } from 'vue';
	import constant from "@/utils/constant"
	import { useUserStore } from '@/store/user'
	
	const userStore = useUserStore()
	
	const orderInfo = ref<any>({})
	const popupShow = ref(false)
	const complaintInfo = ref<any>(null)
	const loading = ref(true)
	
	onLoad((e)=>{
		form.waybillId = e?.id
		getData(e?.id)
	})
	function getData(id: string){
		useWayBillInfoApi(id).then(res=>{
			const {complaint, ...rest} = res
			orderInfo.value = rest
			complaintInfo.value = complaint
			loading.value = false
		})
	}
	const form = reactive({
		waybillId: "",
		info: "",
		img: ""
	})
	const rules = {
		info: {required: true,message: '必须填写申述原因',trigger: ['change','blur']},
	}
	const image = reactive<any>([])
	
	function deletePic(event){
	  image.splice(event.index, 1);
	  form.img = ""
	}
		
	async function afterRead(event){
	  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		const lists: any = [].concat(event.file);
		let fileListLen = image.length;
		lists.forEach((item: any) => {
		image.push({
		    ...item,
		    status: 'uploading',
			message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			const item = image[fileListLen];
			image.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			form.img = JSON.parse(result as string).data
			fileListLen++;
		}
	};
	
	function uploadFilePromise(url){
		return new Promise((resolve) => {
			uni.uploadFile({
				url: constant.uploadUrl, // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				header: {
					Authorization: userStore.token
				},
				formData: {
				},
				success: (res: any) => {
					setTimeout(() => {
						resolve(res.data);
					}, 1000)
				}
		    });
		});
	};
	
	function openAppeal(){
		popupShow.value = true
	}
	
	function submitAppeal(){
		useWayBillAppealApi(form).then(()=>{
		popupShow.value = false
		getData(form.waybillId)
		})
	}
</script>

<template>
	<u-loading-page :loading="loading" loading-text="加载中..."/>
	<view v-if="!loading" style="padding: 10px 20px;" class="color">
		<view class="item"><text>运单编号</text><text>{{orderInfo.id}}</text></view>
		<view class="item"><text>运单状态</text><text>{{waybillstate(orderInfo.state)}}</text></view>
		<view class="item"><text>运单类型</text><text>{{waybilltype(orderInfo.type)}}</text></view>
		<view class="item"><text>起点</text><text>{{orderInfo.loadingAddress}}</text></view>
		<view class="item"><text>终点</text><text>{{orderInfo.unloadingAddress}}</text></view>
		<view class="item"><text>关联的任务</text><text>{{orderInfo.taskName}}</text></view>
		<view class="item"><text>接单时间</text><text>{{orderInfo.startTime}}</text></view>
		<view class="item"><text>完成时间</text><text>{{orderInfo.endTime}}</text></view>
		<view class="item"><text>结算状态</text><text>{{waybillSettlementStatus(orderInfo.settlementStatus)}}</text></view>
		<!-- <view class="item"><text>运单预估收入</text><text>{{orderInfo.revenue}}</text></view> -->
		<view class="item"><text>信用评分</text><text>{{orderInfo.unloadingAddress}}</text></view>
		<view class="item"><text>创建时间</text><text>{{orderInfo.createTime}}</text></view>
	</view>
	<view class="button">
		<u-button v-if="!complaintInfo" type="primary" text="申诉" @click="openAppeal"/>
		<view v-else>申述已处理</view>
	</view>
		<u-popup :show="popupShow" mode="bottom" @close="popupShow=false" :closeable="true" :customStyle="{padding: '40rpx'}" safeAreaInsetBottom>
		            <u-form :model="form" ref="formRef" :rules="rules" label-position="top">
						<u-form-item prop="info" label="申述原因" :required="true" label-width="100">
							<u--textarea v-model="form.info" placeholder="请说明异常情况,如无异常可不填" autoHeight/>
						</u-form-item>
						<u-form-item prop="img" label="查验货物图片" label-width="130" >
							<u-upload
									:fileList="image"
									@afterRead="afterRead"
									@delete="deletePic"
									name="1"
									multiple
									:maxCount="1"
								/>
						</u-form-item>
					</u-form>
					<up-button type="primary" @click="submitAppeal" text="提交"/>
				</u-popup>
</template>

<style>
	.button{
		margin: 20rpx;
	}
	page{
		background: linear-gradient(to bottom, #edd9fd 10% ,#d8c6e6 20%, #F8F8F8 100%);
	}
	.color{
		margin: 20rpx;
		background-color: #F8F8F8;
		border-radius: 20rpx;
	}
	.item{
		display: flex;
		font-size: 28rpx;
	}
	.item > text{
		display: inline-block;
	}
	.item > text:first-child{
		
		min-width: 135rpx;
		margin-right: 50rpx;
		text-align: right;
	}
</style>